<template>
  <el-row justify="end" align="middle">
    <el-pagination
      v-model:current-page="pageIndex"
      v-model:page-size="pageSize"
      background
      :layout="layout"
      :total="total"
      :page-sizes="pageSizes"
      :pager-count="pagerCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-row>
</template>

<script lang="ts" setup>
const emits = defineEmits(['pagination', 'update:size', 'update:page'])

interface Props {
  total: number // 总条目数
  size: number // 每页显示条目个数
  page: number // 当前页数
  layout?: string // 组件布局，子组件名用逗号分隔
  pagerCount?: number // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
  pageSizes?: number[] // 每页显示个数选择器的选项设置
}

const props = withDefaults(defineProps<Props>(), {
  total: 0,
  size: 10,
  page: 1,
  layout: 'total, sizes, prev, pager, next, jumper',
  pagerCount: 5,
  pageSizes: () => [10, 20, 30, 40, 50, 100]
})

const pageIndex = computed({
  get() {
    return props.page
  },
  set(val) {
    console.log('pageIndex', val)
    emits('update:page', val)
  }
})

const pageSize = computed({
  get() {
    return props.size
  },
  set(val) {
    console.log('pageSize', val)
    emits('update:size', val)
  }
})

const handleSizeChange = () => {
  emits('pagination')
}

const handleCurrentChange = () => {
  emits('pagination')
}
</script>
<style lang="scss" scoped></style>
